<script setup>
// 组合式 API,关键词 import，setup
import {ref, onMounted} from 'vue'


var msg = "EE World";
var htmlContent = "<a href='https://www.baidu.com'>百度</a>";

//点击修改dynamicContent内容
const dynamicContent = ref('<p style="color: blue;">初始内容 - 蓝色文字</p>');
const changeContent = () => {
  dynamicContent.value = `
    <h3 style="color: green;">内容已更新!</h3>
    <ul>
      <li>列表项 1</li>
      <li>列表项 2</li>
      <li>列表项 3</li>
    </ul>
  `;
};

//差不多就是init事件了。
onMounted(()=>{
  console.log('onMounted 钩子');
})
</script>

<template>
  <div>
    <p>{{ msg }}</p>
    <p v-html="htmlContent"></p>

    <p><button @click="changeContent">点击我</button> </p>
    <p v-html="dynamicContent"></p>
  </div>

</template>


